import React, { useEffect } from 'react';

import asyncLoad from '~/utils/asyncLoad';

export default function (props) {
  const { xml } = props;

  useEffect(() => {
    asyncLoad([
      '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/atom-one-dark.min.css',
      '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js',
    ]).then(() => {
      window.hljs.highlightAll();
    });
  }, []);

  // const value = xml.replace(/</g, '＆lt;').replace(/>/g, '＆gt;');

  return (
    <pre>
      <code className="xml">{xml}</code>
    </pre>
  );
}
